<template>
  <div>
    <div class="theme_box">
      <!-- <h3>小程序图文配置</h3> -->
      <div>
        <!-- <n-divider title-placement="left">图文设置</n-divider> -->
        <n-button @click="openAdDrawer" type="primary" style="margin-bottom:10px;">添加图文</n-button>
        <ocean :use="AdTable"></ocean>
      </div>
    </div>
    <ocean :use="adDrawer"></ocean>
  </div>
</template>
<script lang="tsx" setup>
import { GlobalAPI, MiniConfigAPI } from '@/app/api';
import { useDrawer, useForm, useTable } from '@/ocean';
import { ref } from 'vue';
import Form from './form/index.vue'
import { useDialog, useMessage } from 'naive-ui'

const message = useMessage();


const AdTable = useTable();
AdTable.column("图片", "img").image();
AdTable.column("图文", "text");
AdTable.define({
  title: "操作",
  render(row) {
    return <n-space>
      <n-button on-click={() => delAd(row)}>删除</n-button>
    </n-space>
  }
});

const adDrawer = useDrawer("添加图文", Form)
adDrawer.button('确定', { type: 'primary' }).click(() => {
  let formRef = adDrawer.getRef();
  let data = formRef.getModel();
  console.log(data)
  MiniConfigAPI.addImageText(data).then(() => {
    queryAdList();
    adDrawer.close();
  });
})
adDrawer.button('取消').click(() => adDrawer.close())
const openAdDrawer = () => {
  adDrawer.open();
}

const delAd = (row) => {
  MiniConfigAPI.deleteImageText({ id: row.id }).then(() => {
    message.success("删除成功")
    queryAdList();
  })
}
const queryAdList = () => {
  MiniConfigAPI.getImagetext().then(res => {
    AdTable.setData(res.data)
  })
}
queryAdList();




</script>
<style lang="scss" scoped>
.theme_box {
  margin-bottom: 20px;

  >h3 {
    margin-bottom: 20px;
  }
}

.add {
  background: #fafafa;
  border: 1px dashed #ccc;
  margin-left: 10px;
  border-radius: 5px;
}
</style>